<template>
  <div>
    <vo-table ref="yuTable" :data="data.tableData">
      <template #leftBar>
        <tiny-input v-model="data.search.name" placeholder="包名或方法名"></tiny-input>
        <tiny-button type="primary" @click="querySysLogSet">查询</tiny-button>
      </template>
      <template #rightBar>
        <tiny-button-group>
          <tiny-button type="primary" @click="add"> <yu-icon iconName="tianjia" /> 新增</tiny-button>
          <tiny-button type="primary" @click="syncBtn"><yu-icon iconName="shujujieruceshi" />同步</tiny-button>
        </tiny-button-group>
      </template>

      <template v-slot:handleSlot="{scopeData}">
        <tiny-button-group>
          <tiny-button text size="small" type="success" @click="editBtn(scopeData.row)">编辑</tiny-button>
          <tiny-button text size="small" type="danger" @click="delRow(scopeData.row, scopeData.row.rowIndex - 1)">删除 </tiny-button>
        </tiny-button-group>
      </template>
    </vo-table>
    <yu-dialog :data="data.dialogConfig" v-model:isShow="data.isShow">
      <LogSetEdit :editData="data.editData" v-model:isShow="data.isShow" />
    </yu-dialog>
  </div>
</template>

<script setup>
  import {reactive, toRefs, onMounted, getCurrentInstance} from 'vue';
  import LogSetEdit from './LogSetEdit.vue';
  const {proxy} = getCurrentInstance();
  const data = reactive({
    search: {},
    tableData: {data: [], cols: [], tableArrts: {}},
    editData: {},
    dialogConfig: {},
    isShow: false,
  });
  data.tableData.cols = [
    {title: '屏蔽包名', key: 'packName', tooltip: true},
    {title: '屏蔽方法', key: 'methodName', tooltip: true},
    {title: '操作', slot: 'handleSlot', tooltip: true, width: 150},
  ];
  const add = () => {
    data.isShow = true;
    data.dialogConfig.width = '550px';
    data.dialogConfig.height = '200px';
    data.dialogConfig.title = '屏蔽新增';
    data.editData = {};
  };
  const querySysLogSet = async () => {
    data.tableData.data = await proxy.$api.system.querySysLogSet(data.search);
  };
  const editBtn = row => {
    data.isShow = true;
    data.dialogConfig.width = '550px';
    data.dialogConfig.height = '200px';
    data.dialogConfig.title = '修改';
    data.editData = row;
  };
  const delRow = async (row, index) => {
    proxy
      .$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then(() => {
        let data = [];
        data.push(row);
        proxy.$api.system.delSysLogSet(data).then(res => {
          if (res.code != -1) {
            proxy.$message({
              type: 'success',
              message: res.msg,
            });
            yuTable.value.deleteRow(row);
          } else {
            proxy.$message({
              type: 'error',
              message: res.msg,
            });
          }
        });
      });
  };
</script>
<style lang="scss" scoped></style>
